//文字
Vue.component('TextBox', {
    template: `<div :id="id" :class="[layer?'layer':'']" style="display: inline;" :style="{'border':layerBorder}">
    <span :style="{marginLeft:Left,marginRight:Right,marginTop:Top,marginBottom:Bottom,fontSize,fontWeight, color ,backgroundColor}">{{data.text}}</span>
    <i v-show="layer&&SortableSwitch" style="position: absolute;top: 0;left: 0; z-index:999; color:#67C23A;" class="el-icon-rank"></i></div>`,
    mixins: [global],
})
Vue.component('TextBoxConfig', {
    template: `<el-card style="background-color: white;">
    <div class="table_titel">
        <div class="titel">文本元素</div>
    </div>
    <el-descriptions :column="2" border size="small">
        <el-descriptions-item label="文本内容">
            <el-input v-model="data.text" placeholder="请输入文本内容"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="文本粗细">
            <el-input-number v-model="data.fontWeight" :min="0" :max="900" :step="100" step-strictly placeholder="请输入文本粗细"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="字体大小">
            <el-input-number v-model="data.fontSize" :min="1" placeholder="请输入字体大小"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="字体单位">
            <el-select filterable v-model="data.fontSizeUnit" placeholder="请选择字体单位">
                <el-option v-for="(item,index) in unit" :key="item.value" :label="item.label":value="item.value"></el-option>
            </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="左边距">
            <el-input-number v-model="data.left" :min="0" placeholder="请输入左边距"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="左边距单位">
            <el-select filterable v-model="data.leftUnit" placeholder="请选择左边距单位">
                <el-option v-for="(item,index) in unit" :key="item.value" :label="item.label":value="item.value"></el-option>
            </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="右边距">
            <el-input-number v-model="data.right" :min="0" placeholder="请输入右边距"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="右边距单位">
            <el-select filterable v-model="data.rightUnit" placeholder="请选择右边距单位">
                <el-option v-for="(item,index) in unit" :key="item.value" :label="item.label":value="item.value"></el-option>
            </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="上边距">
            <el-input-number v-model="data.top" :min="0" placeholder="请输入上边距"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="上边距单位">
            <el-select filterable v-model="data.topUnit" placeholder="请选择上边距单位">
                <el-option v-for="(item,index) in unit" :key="item.value" :label="item.label":value="item.value"></el-option>
            </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="下边距">
            <el-input-number v-model="data.bottom" :min="0" placeholder="请输入下边距"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="下边距单位">
            <el-select filterable v-model="data.bottomUnit" placeholder="请选择下边距单位">
                <el-option v-for="(item,index) in unit" :key="item.value" :label="item.label":value="item.value"></el-option>
            </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="字体颜色">
            <el-color-picker @change="(e)=>{if(e==null)this.data.color=''}" 
                v-model="data.color" show-alphas :predefine="predefineColors"></el-color-picker>
        </el-descriptions-item>
        <el-descriptions-item label="背景颜色">
            <el-color-picker @change="(e)=>{if(e==null)this.data.backgroundColor=''}" 
                v-model="data.backgroundColor" show-alphas :predefine="predefineColors"></el-color-picker>
        </el-descriptions-item>
    </el-descriptions>
</el-card>`,
    mixins: [globalConfig],
    methods: {
        add() {

        },
    }
})